<template>
	<view class="content">
		<view class="img">
			<image style="width: 100%; height: 435rpx;"
				src="https://xiyanluo.oss-cn-beijing.aliyuncs.com/%E8%8D%94%E8%87%B4%E5%AE%B6%E6%95%99/pay.png" mode="">
			</image>
		</view>
		<view class="form">
			<view style="padding: 0 30rpx;">
				<view class="order">
					<!-- 				<view class="name">
						<u-avatar size="118" :src="src"></u-avatar>
						<view style="margin-left: 29rpx;">
							<view class="names">
								<text style="font-size: 31rpx;font-weight: bold;color: #333333;">邓倩</text>
								<image style="width: 27rpx; height: 27rpx; margin: 0 17rpx 0 24rpx;"
									src="../../static/image/women.png" mode=""></image>
								<text class="zhuanzhi">专职教师</text>
							</view>
							<p>ID：456982</p>
						</view>
					</view> -->
					<view class="orderInduce">
						<h5>您的订单信息</h5>
						<view class="list">
							<text class="color">年级</text>
							<text class="dark">{{payDetail.studyGradeName}}</text>
						</view>
						<view class="list">
							<text class="color">辅导科目</text>
							<text class="dark">{{payDetail.counsellingSubjectName || payDetail.subjectRemark}}</text>
						</view>
						<view class="list">
							<text class="color">课费时薪</text>
							<text class="orgin">{{payDetail.auditParentPrice}}</text>
						</view>
						<view class="list">
							<text class="color">辅导时长</text>
							<text class="orgin">{{payDetail.counsellingDurationName}}</text>
						</view>
						<view class="list">
							<text class="color">总计课费</text>
							<text class="orgin">{{payDetail.totalAmount}}</text>
						</view>
						<!-- <view class="list">
							<text class="color">账户余额</text>
							<text class="orgin">0</text>
						</view>
						<view class="list">
							<text class="color">是否使用账户余额</text>
							<u-checkbox-group>
								<u-checkbox v-model="checked"></u-checkbox>
							</u-checkbox-group>
						</view> -->
					</view>
				</view>
			</view>
			<view class="danger">
				*切勿线下交易，资金不安全教学无保障
			</view>
			<view class="pay">
				<view style="height: 149rpx;display: flex;align-items: center;">
					<text style="font-size: 28rpx;color: #333333;">需支付</text>
					<text
						style="width: 60rpx; text-align: center; font-size: 36rpx;font-weight: bold;color: #FF6B55;position: relative;bottom: -14rpx;">￥</text>
					<text style="font-size: 60rpx;font-weight: bold;color: #FF6B55;">{{payDetail.totalAmount}}</text>
				</view>
				<view class="dopay" @tap="doPay">
					立即支付
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from '@/common/utils.js';
	export default {
		data() {
			return {
				payDetail: {},
				checked: false,
				teacherId: ''
			};
		},
		onLoad(options) {
			this.payDetail = JSON.parse(options.pay)
			console.log(options);
			this.teacherId = options.teacherId
		},
		methods: {
			doPay() {
				let apiUrl = this.teacherId?this.$u.api.agreenTeacher:this.$u.api.doPay
				let param={
					orderId: this.payDetail.id,
					payAmount: this.payDetail.totalAmount
				}
				if(this.teacherId){
					param.applyId=this.teacherId
				}
					apiUrl(param).then(data => {
						let that=this
						utils.doPay(data, function(a) {
							if (a) {
								uni.showToast({
									title: '恭喜支付成功',
									icon: ''
								})
								let pages = getCurrentPages()
								// 2. 上一页面实例
									// 注意是length长度，所以要想得到上一页面的实例需要 -2
									// 若要返回上上页面的实例就 -3，以此类推
								let prevPage = pages[pages.length -2] 
								
								// 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
								prevPage.$vm.getBack(1) 
								uni.navigateBack()
								// uni.navigateTo({
								// 	url:`/pages/invent/demandDel?id=${that.payDetail.id}&current=1`
								// })
								
							} else {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					})
				} 
				
				// else {
				// 	this.$u.api.doPay({
				// 		orderId: this.payDetail.id,
				// 		payAmount: this.payDetail.totalAmount
				// 	}).then(data => {

				// 		utils.doPay(data, function(a) {
				// 			if (a) {
				// 				uni.showToast({
				// 					title: `恭喜支付成功',
				// 					icon: ''
				// 				})
				// 				uni.navigateBack({
				// 					delta: 1
				// 				})
				// 			} else {
				// 				uni.navigateBack({
				// 					delta: 1
				// 				})
				// 			}
				// 		})
				// 	})
				// }

			}
		
	}
</script>

<style lang="scss">
	page {
		background-color: #efefef !important;
	}

	/deep/.u-checkbox-group {
		width: 36rpx !important;
	}

	.color {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.dark {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.orgin {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF6D56;
	}



	.form {
		width: 100%;
		position: absolute;
		top: 27%;

		.danger {
			margin-top: 45rpx;
			height: 97rpx;
			background: #F3E6E9;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #E33D65;
			text-align: center;
			line-height: 97rpx;
		}

		.pay {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 149rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 13rpx 32rpx 0rpx rgba(182, 181, 181, 0.23);

			.dopay {
				width: 211rpx;
				height: 70rpx;
				background: linear-gradient(-90deg, #FF8D5F, #FF6A55);
				border-radius: 35rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 70rpx;
			}
		}

		.order {
			padding: 0 35rpx;
			// height: 1172rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 13rpx 95rpx 0rpx rgba(182, 181, 181, 0.23);
			border-radius: 20rpx;

			.name {
				display: flex;
				// align-items: center;
				padding: 64rpx 0 46rpx;
				height: 228rpx;
				border-bottom: 1rpx solid #eee;

				.names {
					margin-top: 16rpx;
				}

				p {
					margin-top: 20rpx;
					font-size: 23rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}

			.orderInduce {
				padding-top: 47rpx;

				h5 {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}

			.list {
				height: 119rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #eee;
			}
		}
	}
</style>